Google Charts এর Pie Chart হল একটি জনপ্রিয় চার্ট টাইপ যা ডেটার ভগ্নাংশ বা অংশবিশেষের তুলনা করতে ব্যবহৃত হয়। এটি সহজেই ডেটার ভাগ এবং শতাংশ প্রদর্শন করতে সক্ষম, যেমন মার্কেট শেয়ার, মাসিক খরচ, এবং বিভিন্ন বিভাগের অংশ।
এখানে আমরা Pie Chart তৈরি করার জন্য ডেটা সেটআপ এবং কাস্টমাইজেশন সম্পর্কে বিস্তারিত আলোচনা করব।
Pie Chart এর জন্য Data Setup
Pie Chart তৈরি করতে Google Charts এ ডেটা সঠিকভাবে সেটআপ করা প্রয়োজন। সাধারণত ডেটা arrayToDataTable() ফাংশন ব্যবহার করে প্রস্তুত করা হয়, যেখানে প্রথম কলাম হবে ক্যাটেগরি এবং দ্বিতীয় কলাম হবে প্রতিটি ক্যাটেগরির মান।
উদাহরণ: Basic Pie Chart Data Setup
google.charts.load('current', {packages: ['corechart', 'pie']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Amount'],
['Food', 45],
['Rent', 25],
['Utilities', 15],
['Entertainment', 10],
['Others', 5]
]);
var options = {
title: 'Monthly Expenses Distribution'
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
}
ব্যাখ্যা:
- ডেটা: এখানে ক্যাটেগরি (যেমন 'Food', 'Rent') এবং তাদের মান (যেমন 45%, 25% ইত্যাদি) রয়েছে।
- arrayToDataTable(): এই ফাংশনটি ডেটাকে গুগল চার্ট API এর জন্য সঠিক ফরম্যাটে রূপান্তর করে।
Pie Chart কাস্টমাইজেশন (Customization)
Google Charts এর Pie Chart কে কাস্টমাইজ করার অনেক উপায় রয়েছে। আপনি চার্টের শিরোনাম, রং, আকার, ৩ডি প্রভাব এবং টুলটিপ ইত্যাদি পরিবর্তন করতে পারেন।
১. Chart Title (চার্ট শিরোনাম)
চার্টের শিরোনাম কাস্টমাইজ করা যায়, যা ডেটার গুরুত্ব এবং অর্থ স্পষ্ট করতে সাহায্য করে।
var options = {
title: 'Monthly Expenses Distribution'
};
২. 3D Effect (৩ডি প্রভাব)
পাই চার্টে ৩ডি প্রভাব যোগ করা যেতে পারে, যা চার্টকে আরো আকর্ষণীয় এবং দৃশ্যমান করে তোলে।
var options = {
title: 'Monthly Expenses Distribution',
is3D: true
};
৩. Slice Customization (স্লাইস কাস্টমাইজেশন)
পাই চার্টের প্রতিটি স্লাইসের রং, আকার এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করা যায়। যেমন আপনি এক বা একাধিক স্লাইসকে আলাদা করে তুলে ধরতে পারেন।
var options = {
title: 'Monthly Expenses Distribution',
slices: {
0: { offset: 0.1, color: '#ff0000' }, // First slice (Food) is offset and red
1: { offset: 0.1, color: '#00ff00' } // Second slice (Rent) is offset and green
}
};
৪. Legend (লেজেন্ড)
লেজেন্ডের অবস্থান পরিবর্তন করা যায়, যেমন এটি ডান, বাম, উপরের দিকে, বা নীচের দিকে থাকতে পারে।
var options = {
title: 'Monthly Expenses Distribution',
legend: { position: 'bottom' }
};
৫. Tooltip Customization (টুলটিপ কাস্টমাইজেশন)
পাই চার্টে টুলটিপসের মাধ্যমে স্লাইসের বিস্তারিত তথ্য প্রদর্শন করা যায়। আপনি isHtml অপশন দিয়ে HTML টুলটিপ যোগ করতে পারেন।
var options = {
title: 'Monthly Expenses Distribution',
tooltip: { isHtml: true }
};
৬. Pie Slice Text (পাই স্লাইস টেক্সট)
স্লাইসে টেক্সট প্রদর্শন করার জন্য pieSliceText অপশন ব্যবহার করা হয়। আপনি এখানে ‘percentage’, ‘value’, অথবা ‘none’ সেট করতে পারেন।
var options = {
title: 'Monthly Expenses Distribution',
pieSliceText: 'percentage'
};
৭. Chart Size (চার্টের আকার)
চার্টের আকার কাস্টমাইজ করা যায়, যেমন width এবং height অপশন দিয়ে।
var options = {
title: 'Monthly Expenses Distribution',
width: 600,
height: 400
};
উদাহরণ: Full Customization সহ Pie Chart
এখানে একটি পূর্ণাঙ্গ কাস্টমাইজড Pie Chart উদাহরণ দেওয়া হল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Pie Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'pie']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Amount'],
['Food', 45],
['Rent', 25],
['Utilities', 15],
['Entertainment', 10],
['Others', 5]
]);
var options = {
title: 'Monthly Expenses Distribution',
is3D: true,
slices: {
0: { offset: 0.1, color: '#ff0000' }, // Food
1: { offset: 0.1, color: '#00ff00' } // Rent
},
pieSliceText: 'percentage',
legend: { position: 'bottom' },
tooltip: { isHtml: true },
width: 600,
height: 400
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Custom Pie Chart Example</h2>
<div id="pie_chart" style="width: 600px; height: 400px;"></div>
</body>
</html>
উপসংহার
Google Charts এর Pie Chart এর জন্য ডেটা সেটআপ এবং কাস্টমাইজেশন অত্যন্ত সহজ এবং লचीলা। আপনি বিভিন্ন ধরনের কাস্টমাইজেশন অপশন ব্যবহার করে আপনার চার্টকে আরও আকর্ষণীয় এবং তথ্যপূর্ণ করে তুলতে পারেন। এই কাস্টমাইজেশনগুলো আপনাকে আপনার ডেটাকে সুন্দরভাবে উপস্থাপন করতে সহায়তা করবে এবং আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনে একটি ইন্টারঅ্যাকটিভ এবং কার্যকরী ডেটা ভিজ্যুয়ালাইজেশন তৈরি করবে।
Read more
